<!-- eslint-disable vue/multi-word-component-names -->

<!-- 自定义头像组件 必传参数：avatar_name ; 定义avatar_width 自动根据大小生成正方形。 -->
<template>
  <div class="search-container">
    <div class="search-wrapper">
      <el-input
        v-model="searchData"
        ref="searchDataRef"
        size="large"
        @input="searchDataChange"
        @keydown.delete="handleKeyDelete"
        placeholder="搜索..."
        :prefix-icon="Search"
        @blur="searchDataBlur"
        class="custom-input"
      >
        <template #prefix>
          <div class="tag-container" ref="tagContainerRef">
            <el-tag
              v-for="(tag, index) in searchTagList"
              :key="index"
              class="search-tag"
              closable
              @close="handleCloseTag(index)"
            >
              <el-tooltip
                :content="`${tag.title}: ${tag.value}`"
                placement="top"
                effect="dark"
                :show-after="200"
                popper-class="tag-tooltip"
              >
                <div class="tag-content">
                  <span class="tag-title">{{ tag.title }}</span>
                  <span class="tag-separator">:</span>
                  <span class="tag-value">{{ tag.value }}</span>
                </div>
              </el-tooltip>
            </el-tag>
          </div>
        </template>
      </el-input>
    </div>
    <el-card class="search-card" v-if="showDropMenu">
      <div v-for="(configItem,index) in  searchConfig" @click="chooseSearchData(configItem)" :key="index">
        <span>
          <span style="font-size: medium;">搜索</span>
          <span style="font-weight: 600; margin-left: 5px;"> {{configItem.title}} </span>
          <span style="margin-left: 5px;"> 为 : </span>
          <span style="font-size: medium; font-weight: 600; color: #714b67; font-style: italic;">{{ searchData }}</span>
        </span>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { SearchDataStruct } from '.';
import type { PropType } from 'vue';

const tagContainerRef = ref<HTMLElement | null>(null);
const searchTagList = ref<Array<SearchDataStruct>>([]);
const showDropMenu = ref<boolean>(false);
const searchData = ref<string>('');
const emits = defineEmits(['searchCallBack']);
const propsConfig = defineProps({
  fieldsConfig: {
       type: Array as PropType<SearchDataStruct[]>,
       required: false,
       default: () => []
     }
});
const chooseSearchData = (item: SearchDataStruct) => {
  // 查找是否已存在相同属性的标签
  const existingTagIndex = searchTagList.value.findIndex(tag => tag.field === item.field);

  if (existingTagIndex !== -1) {
    // 如果存在相同属性，拼接值
    const existingTag = searchTagList.value[existingTagIndex];
    searchTagList.value[existingTagIndex] = {
      ...existingTag,
      value: `${existingTag.value} 或 ${searchData.value.trim()}`
    };
  } else {
    // 如果不存在，添加新标签
    searchTagList.value.push({
      ...item,
      value: searchData.value.trim()
    });
  }

  searchData.value = '';
  showDropMenu.value = false;
  emits('searchCallBack', searchTagList.value);
}

const handleCloseTag = (index: number) => {
  searchTagList.value.splice(index, 1);
  emits('searchCallBack', searchTagList.value);
}

//input时事件
const searchDataChange = (val :string)=>{
  showDropMenu.value = val != null && val.trim() != '';
}

//input失焦事件
const searchDataBlur = () => {
  setTimeout(() => {
    showDropMenu.value = false;
    searchData.value = '';
  }, 200);
}

// 处理键盘删除事件
const handleKeyDelete = (event: KeyboardEvent) => {
  // 当输入框为空且存在标签时，删除最后一个标签
  if (searchData.value === '' && searchTagList.value.length > 0) {
    event.preventDefault(); // 阻止默认删除行为
    searchTagList.value.pop(); // 删除最后一个标签
  }
  emits('searchCallBack', searchTagList.value);
}

//配置的搜索内容
const searchConfig = ref<SearchDataStruct[]>([])

watch(

    () => propsConfig.fieldsConfig,
    async (fieldsConfig) => {
    if(fieldsConfig){
      searchConfig.value = fieldsConfig;
    }
  },
  { deep: true, immediate: true }
);

</script>

<style scoped>
.search-container {
  width: 100%;
  min-width: 800px;
  max-width: 1200px;
  position: relative;
}

.search-wrapper {
  position: relative;
  width: 100%;
}

:deep(.custom-input) {
  width: 100%;
}

:deep(.custom-input .el-input__wrapper) {
  padding: 4px 11px !important;
  height: auto !important;
  min-height: 40px;
  box-shadow: 0 0 0 1px #e4e2e4 !important;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

:deep(.custom-input .el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #714b67 !important;
  background-color: #fdfcfd;
}

:deep(.custom-input .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(113, 75, 103, 0.2) !important;
  background-color: #ffffff;
}

:deep(.custom-input .el-input__inner) {
  min-width: 100px !important;
  margin: 4px 0 4px 8px !important;
  height: 24px !important;
  line-height: 24px !important;
  color: #42526e;
  font-size: 14px;
}

:deep(.custom-input .el-input__prefix) {
  margin-right: 0;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 6px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  align-items: center;
  max-width: 600px;
  padding: 2px 0;
}

.search-tag {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 10px !important;
  margin: 0;
  font-size: 13px;
  flex-shrink: 0;
  max-width: 600px;
  background-color: #f8f7f9 !important;
  border: none !important;
  color: #714b67 !important;
  border-radius: 4px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-tag:hover {
  background-color: #f1edf0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

:deep(.search-tag .el-tag__close) {
  color: #714b67;
  font-weight: bold;
  font-size: 12px;
  margin-left: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
  background-color: transparent;
  width: 16px;
  height: 16px;
  line-height: 16px;
}

:deep(.search-tag .el-tag__close:hover) {
  background-color: #714b67;
  color: white;
  transform: scale(1.1);
}

.tag-content {
  display: inline-flex;
  align-items: center;
  height: 100%;
  cursor: default;
}

.tag-title {
  font-weight: 600;
  color: #714b67;
  letter-spacing: 0.2px;
  min-width: 40px;
}

.tag-separator {
  margin: 0 6px;
  color: #8f8f8f;
  font-weight: 300;
  flex-shrink: 0;
}

.tag-value {
  color: #42526e;
  font-style: italic;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
  line-height: 28px;
  vertical-align: top;
}

.search-card {
  position: absolute;
  width: 800px;
  margin-top: 8px;
  max-height: 350px;
  overflow-y: auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 999;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: none;
  background-color: #ffffff;
}

:deep(.el-card__body) {
  display: block !important;
  padding: 8px 0 !important;
}

.search-card div {
  word-wrap: break-word;
  white-space: normal;
  padding: 10px 16px;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 0 4px;
}

.search-card div:hover {
  background-color: #f8f7f9;
  cursor: pointer;
  transform: translateX(2px);
}

/* 自定义tooltip样式 */
:deep(.tag-tooltip) {
  max-width: 400px !important;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  font-size: 13px !important;
  word-break: break-word !important;
  border-radius: 4px !important;
}

:deep(.tag-tooltip .el-tooltip__content) {
  white-space: pre-wrap !important;
}
</style>
